<template>
	<div id="SearchResult">
		<div class="main" v-if="appraisal != ''">
			<div class="opacity" v-bind:style="{'background-image':'url(http://pm.haowenwan.com/public/static/images/search_opacity.jpg)'}">
				<div class="search-bg" v-bind:style="{'background-image':'url(http://pm.haowenwan.com/public/static/images/search_bg.jpg)'}">
					<div class="content">
						<div class="title">
							<p>河南省郑州市古玩城鉴定证书</p>
							<span>证书编号:{{appraisal.appraisal_number}}</span>
						</div>
						<div class="goods">
							<!--http://pm.haowenwan.com/public/static/images/search_img.png-->
							<img :src="'/los' + appraisal.appraisal_img" alt="" />
							<p>{{appraisal.appraisal_name}}</p>
						</div>
						<div class="desc">
							<div class="left">
								<p>形状:{{appraisal.appraisal_shape}}</p>
								<p>总质量:0.8kg</p>
								<p>参考价:{{appraisal.appraisal_size}}</p>
								<p>放大检查:{{appraisal.site_name}}</p>
							</div>
							<div class="qrcode">
								<p>扫码查看详情</p>
								<img id="imgSrc" src="" alt="" />
							</div>
						</div>
						<div class="author">
							<p>鉴定者:{{appraisal.expert_name}}</p>
							<span>审核人:{{appraisal.appraisal_audit}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="main" v-else>
			<x-header :left-options="{showBack: false}" title="鉴定查询" class="header">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="nodata">
				<img src="../../assets/images/home/icon_cert_Indetify.png" alt="" class="ineffect" />
			</div>
			<p class="inresult">查询无果或编号有误</p>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import QRCode from 'qrcode'
	import {
		XHeader,
		Group,
		Cell,
		Blur
	} from 'vux';
	export default { //变量
		data() {
			return {
				appraisal: '',
				height: 500,
				appraisal_number: '',
				url: require('../../assets/images/home/result.png')
			}
		},
		components: {
			XHeader,
			Group,
			Cell,
			Blur,
			QRCode
		},
		activated() {
			this.getAppraisal();
		},
		methods: {
			getAppraisal: function() {
				let appraisal_number = this.$route.params.appraisal_number;
				this.$http({
					method: 'GET',
					url: '/los/api/appraisal/details.json?appraisal_id=' + appraisal_number,
					data: ''
				}).then((result) => {
					if(result.data.data == null) {
						this.appraisal == ''
					} else {
						this.appraisal = result.data.data;
						this.$nextTick(() => {
							let urls = window.location.href;
							console.log(urls);
							QRCode.toDataURL(urls, {
								errorCorrectionLevel: 'H'
							}, function(err, url) {
								document.getElementById('imgSrc').src = url;
							})
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			back() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#SearchResult {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		background-size: 100% 100%;
		overflow: hidden;
	}

	#SearchResult:before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: inherit;
		filter: blur(2px);
		opacity: 0.1;
		z-index: 2;
	}

	.main {
		background-color: #fff;
		z-index: 9;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.nodata {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.nodata .ineffect {
		width: 100%;
	}

	.inresult {
		text-align: center;
		font-size: 0.4rem;
		color: #aaa;
		line-height: 1rem;
	}

	.opacity {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		position: relative;
	}

	.search-bg {
		position: absolute;
		background-size: 100% 100%;
		width: 91.5%;
		height: 88%;
		top: 0.74rem;
		left: 0.42rem;
		overflow: hidden;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.content .title {
		margin-top: 1.33rem;
		margin-top: 1rem;
		width: 100%;
		text-align: center;
	}

	.content .title p {
		font-size: 0.53rem;
		color: #fff;
		margin-bottom: 0.64rem;
		margin-bottom: 0.32rem;
	}

	.content .title span {
		color: #fff;
		font-size: 0.32rem;
	}

	.content .goods {
		/*margin-top: 0.5rem;*/
		margin-top: 0.32rem;
		text-align: center;
	}

	.content .goods img {
		width: 4.96rem;
		height: 5.44rem;
		background-size: 100% 100%;
		/*margin-left: 1rem;*/
	}

	.content .goods p {
		font-size: 0.48rem;
		color: #fff;
	}

	.content .desc {
		margin-top: 0.34rem;
		padding: 0 0.77rem;
		color: #fff;
		font-size: 0.32rem;
		line-height: 0.48rem;
		overflow: hidden;
		margin-bottom: 0.4rem;
	}

	.content .desc .left {
		float: left;
		width: 62%;
	}

	.content .desc .qrcode {
		float: right;
		overflow: hidden;
	}

	.content .desc .qrcode p {
		width: 0.4rem;
		font-size: 0.26rem;
		color: #fff;
		float: left;
		writing-mode: tb-rl;
		text-align: center;
		margin-top: 0.1rem;
	}

	.content .desc .qrcode img {
		width: 1.93rem;
		height: 1.93rem;
		float: right;
	}

	.content .author {
		margin: 0 0.77rem;
		height: 1.01rem;
		line-height: 1.01rem;
		overflow: hidden;
		text-align: center;
		color: #fff;
		font-size: 0.32rem;
		position: absolute;
		bottom: 0.5rem;
		left: 0.77rem;
		right: 0.77rem;
	}

	.content .author p {
		float: left;
	}

	.content .author span {
		float: right;
	}

	.header {
		background-color: #fff !important;
		z-index: 9;
	}

	.result {
		display: flex;
		height: 16.6rem;
		text-align: center;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 1.33333rem;
	}

	.result .img {
		width: 1.94666rem;
		margin: 0 auto;
		z-index: 9;
	}

	.result .img img {
		width: 100%;
		z-index: 9;
	}

	.result p {
		padding: 0.66666rem 0;
		font-size: 0.32rem;
		z-index: 9;
	}
</style>
